
<!-- subscribeBook 开始啦 -->
<template>
  <subscribe-list :title="listTitle">
    <list-content :data="listData" @click="subscribeBtn"></list-content>
  </subscribe-list>
</template>

<script>
import SubscribeList from './components/SubscribeBook/SubscribeList.vue';
import ListContent from './components/SubscribeBook/ListContent.vue';

export default {
  name: 'App',
  components: {
    SubscribeList,
    ListContent
  },
  data(){
    return {
      listTitle: 'This is SubscribeList!',
      listData: [
        {
          id: 1,
          title: '悲惨的世界',
          isSubscribe: true,
          subscribed: false
        },
        {
          id: 2,
          title: '那不勒斯',
          isSubscribe: false,
          subscribed: false
        },
        {
          id: 3,
          title: '尘埃落定',
          isSubscribe: true,
          subscribed: false
        }
      ]
    }
  },
  methods: {
    subscribeBtn(e) {
      const id = e.target.dataset.id;
      
      this.listData = this.listData.map(item => {
        if (id == item.id) {
          item.subscribed = !item.subscribed;
        }
        return item;
      });
      
    }
  }
}
</script>

<style>

</style>
<!-- subscribeBook 结束啦 -->